<script lang="ts">
import { defineComponent, ref, onMounted, computed } from "vue";
import { getRentInfo, getEnergyAddrList, getaccountresource } from "@/api";
import { toStringMatch } from "@/utils/format";
import { AppModule } from "@/store/modules/app";

export default defineComponent({
    setup() {
        const activeNames = ref(["1"]);
        const rentInfo = ref({});
        const energy = ref(0);
        const energy2 = ref(0);
        const language = computed(() => AppModule.language);
        const tranNumber = computed(() => {
            return (num, point) => {
                let numStr = num.toString().split(".")[0];
                if (numStr.length < 6) {
                    // 判断数字有多长,如果小于6,,表示10万以内的数字,让其直接显示
                    return toStringMatch(num, point);
                } else if (numStr.length >= 6 && numStr.length <= 8) {
                    // 如果数字大于6位,小于8位,让其数字后面加单位万
                    let decimal = numStr.substring(
                        numStr.length - 4,
                        numStr.length - 4 + point
                    );
                    // 由千位,百位组成的一个数字
                    if (["zh", "hk"].indexOf(AppModule.language) !== -1) {
                        return (
                            parseFloat(parseInt(num / 10000) + "." + decimal) +
                            " 万"
                        );
                    } else {
                        return (
                            toStringMatch(
                                parseFloat(
                                    parseInt(num / 10000) + "." + decimal
                                ) / 100,
                                6
                            ) + " m"
                        );
                    }
                } else if (numStr.length > 8) {
                    // 如果数字大于8位,让其数字后面加单位亿
                    let decimal = numStr.substring(
                        numStr.length - 8,
                        numStr.length - 8 + point
                    );
                    if (["zh", "hk"].indexOf(AppModule.language) !== -1) {
                        return (
                            parseFloat(
                                parseInt(num / 100000000) + "." + decimal
                            ) + " 亿"
                        );
                    } else {
                        return (
                            toStringMatch(
                                parseFloat(
                                    parseInt(num / 100000000) + "." + decimal
                                ) / 10,
                                6
                            ) + " b"
                        );
                    }
                }
                return toStringMatch(num);
            };
        });
        const targetElement1 = ref();
        const targetElement2 = ref();
        const handleScroll = () => {
            const elementF = (id) => {
                const element = id;
                const rect = element.value.getBoundingClientRect();
                if (rect.top < window.innerHeight) {
                    element.value.classList.add("leftScroll");
                } else {
                    element.value.classList.remove("leftScroll");
                }
            };
            elementF(targetElement1);
            elementF(targetElement2);
        };

        const particlesOptions = ref({
            background: {
                color: {},
            },
            fullScreen: {
                enable: false,
            },
            opacity: {
                value: 1,
                random: true,
            },
            fpsLimit: 120,
            interactivity: {
                events: {
                    onClick: {
                        enable: true,
                        mode: "push",
                    },
                    onHover: {
                        enable: true,
                        mode: "repulse",
                    },
                },
                modes: {
                    bubble: {
                        distance: 400,
                        duration: 2,
                        opacity: 0.8,
                        size: 40,
                    },
                    push: {
                        quantity: 4,
                    },
                    repulse: {
                        distance: 200,
                        duration: 0.4,
                    },
                },
            },
            particles: {
                color: {
                    value: "random",
                    animation: {
                        enable: true,
                        speed: 20,
                        sync: true,
                    },
                },
                links: {
                    color: "random",
                    distance: 150,
                    enable: true,
                    opacity: 0.5,
                    width: 1,
                },
                move: {
                    direction: "none",
                    enable: true,
                    outModes: "bounce",
                    random: false,
                    speed: 1,
                    straight: false,
                },
                number: {
                    density: {
                        enable: true,
                    },
                    value: 200,
                },
                opacity: {
                    value: 0.5,
                },
                shape: {
                    type: "circle",
                },
                size: {
                    value: { min: 1, max: 5 },
                },
            },
            detectRetina: true,
        });

        const isMobile = () => {
            const userAgent =
                navigator.userAgent || navigator.vendor || window.opera;
            // 通常手机浏览器的user agent中包含以下字符串中的至少一个
            return /android|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(
                userAgent.toLowerCase()
            );
        };
        onMounted(() => {
            // window.addEventListener("scroll", handleScroll);
            getRentInfo().then((res) => {
                rentInfo.value = res.data.data;
            });
            energy.value = 0;
            energy2.value = 0;
            let num1 = 0;
            let num2 = 0;
            getEnergyAddrList().then(async (res) => {
                if (res.data.code == 20) {
                    for (
                        let index = 0;
                        index < res.data.data.EnergyAddrList.length;
                        index++
                    ) {
                        const element = res.data.data.EnergyAddrList[index];
                        num1 = num1 + element.TotalEnergy;
                        const resource = await getaccountresource({
                            address: element.Address,
                            visible: true,
                        });
                        num2 =
                            num2 +
                            ((resource.data.EnergyLimit || 0) -
                                (resource.data.EnergyUsed || 0));
                        console.log(num2, "------------");
                    }
                }
                energy.value = num1;
                energy2.value = num2;
            });
            if (isMobile()) {
                setTimeout(() => {
                    activeList.value.push(1);
                }, 200);
            }
        });
        const active = ref(0);
        const activeList = ref([]);
        const changeTabs = (id) => {
            activeList.value.push(id);
        };
        return {
            activeNames,
            rentInfo,
            energy,
            energy2,
            tranNumber,
            targetElement1,
            targetElement2,
            active,
            changeTabs,
            activeList,
            particlesOptions,
            language,
        };
    },
});
</script>

<template>
    <div class="page">
        <div class="main2">
            <div class="banner">
                <div class="d">
                    <div class="info">
                        <div class="name">{{ $t("layout.text11") }}</div>
                        <div class="TronBank">TronBank.Pro</div>
                    </div>
                    <div class="image">
                        <img src="@/assets/image/img5.png" alt="" srcset="" />
                    </div>
                </div>
                <div class="row">
                    <div class="cell">
                        <div class="value">{{ tranNumber(energy2, 2) }}</div>
                        <div class="label">{{ $t("layout.page3") }}</div>
                    </div>
                    <div class="cell">
                        <div class="value">
                            {{ tranNumber(rentInfo.SumEnergy || 0, 2) }}
                        </div>
                        <div class="label">{{ $t("layout.page4") }}</div>
                    </div>
                    <div class="cell">
                        <div class="value">
                            {{ tranNumber(rentInfo.SumRentFee || 0, 2) }} TRX
                        </div>
                        <div class="label">{{ $t("layout.text13") }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="main">
            <div class="Energyleasing">
                <div class="leasingblock">
                    <div class="name">{{ $t("layout.text90") }}</div>
                    <div class="row">
                        <div class="cell">
                            <img
                                src="@/assets/image/img13.png"
                                alt=""
                                srcset=""
                            />
                            {{ $t("layout.text15") }}
                        </div>
                        <div class="cell">
                            <img
                                src="@/assets/image/img13.png"
                                alt=""
                                srcset=""
                            />
                            {{ $t("layout.text16") }}
                        </div>
                        <div class="cell">
                            <img
                                src="@/assets/image/img13.png"
                                alt=""
                                srcset=""
                            />
                            {{ $t("layout.text17") }}
                        </div>
                    </div>
                    <div class="text">
                        {{ $t("layout.text91") }}
                    </div>
                    <div class="button-wrap">
                        <van-button round block type="primary" to="/index">
                            {{ $t("layout.text18") }}
                        </van-button>
                    </div>
                </div>
                <div class="leasingblock">
                    <div class="name">{{ $t("layout.text92") }}</div>
                    <div class="row">
                        <div class="cell">
                            <img
                                src="@/assets/image/img13.png"
                                alt=""
                                srcset=""
                            />
                            {{ $t("layout.text21") }}
                        </div>
                        <div class="cell">
                            <img
                                src="@/assets/image/img13.png"
                                alt=""
                                srcset=""
                            />
                            {{ $t("layout.text22") }}
                        </div>
                        <div class="cell">
                            <img
                                src="@/assets/image/img13.png"
                                alt=""
                                srcset=""
                            />
                            {{ $t("layout.text23") }}
                        </div>
                    </div>
                    <div class="text">
                        {{ $t("layout.text93") }}
                    </div>
                    <div class="button-wrap">
                        <van-button round block type="primary" to="/stake">
                            {{ $t("layout.text24") }}
                        </van-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="HowToParticipate">
            <div class="main">
                <div class="name">
                    {{ $t("layout.text94") }}
                </div>
                <div class="row">
                    <div class="cell">
                        <img src="@/assets/image/img8.png" alt="" srcset="" />
                        <div class="label">
                            <i>1</i>
                            {{ $t("layout.text95") }}
                        </div>
                    </div>
                    <div class="cell">
                        <img src="@/assets/image/img9.png" alt="" srcset="" />
                        <div class="label">
                            <i>2</i>
                            {{ $t("layout.text96") }}
                        </div>
                    </div>
                    <div class="cell">
                        <img src="@/assets/image/img10.png" alt="" srcset="" />
                        <div class="label">
                            <i>3</i>
                            {{ $t("layout.text97") }}
                        </div>
                    </div>
                    <div class="cell">
                        <img src="@/assets/image/img11.png" alt="" srcset="" />
                        <div class="label">
                            <i>4</i>
                            {{ $t("layout.text98") }}
                        </div>
                    </div>
                    <div class="cell">
                        <img src="@/assets/image/img12.png" alt="" srcset="" />
                        <div class="label">
                            <i>5</i>
                            {{ $t("layout.text99") }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="main2">
            <div class="tbk">
                <div class="title">{{ $t("layout.text38") }}</div>
                <div class="text">{{ $t("layout.text39") }}</div>
                <div class="image" v-if="language == 'zh'" :class="language">
                    <img
                        src="@/assets/image/img14.svg"
                        alt=""
                        srcset=""
                        class="max"
                    />
                    <img
                        src="@/assets/image/img14m.svg"
                        alt=""
                        srcset=""
                        class="min"
                    />
                </div>
                <div class="image" :class="language" v-else>
                    <img
                        src="@/assets/image/img14en.svg"
                        alt=""
                        srcset=""
                        class="max"
                    />
                    <img
                        src="@/assets/image/img14men.svg"
                        alt=""
                        srcset=""
                        class="min"
                    />
                </div>
            </div>
            <div class="TBKTokenEconomicModel">
                <div class="info">
                    <div class="name">
                        {{ $t("layout.text26") }}
                    </div>
                    <div class="text">
                        <span>{{ $t("layout.page12") }}</span>
                        <br />
                        <br />
                        <span> {{ $t("layout.text37") }}</span>
                    </div>
                </div>
                <div class="blockModel">
                    <div class="row1">
                        <div class="cell _block">
                            <div>
                                <div class="value">50%</div>
                                <div class="label">
                                    {{ $t("layout.text34") }}
                                </div>
                            </div>
                        </div>
                        <div class="cell">
                            <div class="cel _block">
                                <div>
                                    <div class="value">15%</div>
                                    <div class="label">
                                        {{ $t("layout.text27") }}
                                    </div>
                                </div>
                            </div>
                            <div class="cel _block">
                                <div>
                                    <div class="value">15%</div>
                                    <div class="label">
                                        {{ $t("layout.text29") }}
                                    </div>
                                    <span>({{ $t("layout.text30") }})</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row2">
                        <div class="cell _block">
                            <div>
                                <div class="value">10%</div>
                                <div class="cedc">
                                    <div class="label">
                                        {{ $t("layout.text31") }}
                                    </div>
                                    <span>({{ $t("layout.text30") }})</span>
                                </div>
                            </div>
                        </div>
                        <div class="cell _block">
                            <div>
                                <div class="value">10%</div>
                                <div class="label">
                                    {{ $t("layout.text28") }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="map">
                <div class="title">
                    <span>{{ $t("layout.text45") }}</span>
                </div>
                <ul>
                    <li>
                        <div class="info">
                            <div class="label">
                                {{ $t("layout.text46") }}
                            </div>
                            <div class="text">
                                <p>
                                    <span>{{ $t("layout.text45_1") }}</span
                                    >{{ $t("layout.text47") }}
                                </p>
                                <p>
                                    <span>{{ $t("layout.text45_2") }}</span
                                    >{{ $t("layout.text48") }}
                                </p>
                                <p>
                                    <span>{{ $t("layout.text45_3_1") }}</span
                                    >{{ $t("layout.text49") }}
                                </p>
                            </div>
                        </div>
                        <div class="no"></div>
                    </li>
                    <li>
                        <div class="info">
                            <div class="label">
                                {{ $t("layout.text50") }}
                            </div>
                            <div class="text">
                                <p>
                                    <span>{{ $t("layout.text45_1") }}</span
                                    >{{ $t("layout.text51") }}
                                </p>
                                <p>
                                    <span>{{ $t("layout.text45_3_1") }}</span
                                    >{{ $t("layout.text52") }}
                                </p>
                            </div>
                        </div>
                        <div class="no"></div>
                    </li>
                    <li>
                        <div class="info">
                            <div class="label">
                                {{ $t("layout.text53") }}
                            </div>
                            <div class="text">
                                <p>
                                    <span>{{ $t("layout.text45_1") }}</span
                                    >{{ $t("layout.text54") }}
                                </p>
                                <p>
                                    <span>{{ $t("layout.text45_3") }}</span
                                    >{{ $t("layout.text55") }}
                                </p>
                            </div>
                        </div>
                        <div class="no"></div>
                    </li>
                    <li class="current">
                        <div class="info">
                            <div class="label">
                                {{ $t("layout.text56") }}
                            </div>
                            <div class="text">
                                <p>
                                    <span>{{ $t("layout.text45_1") }}</span
                                    >{{ $t("layout.text57") }}
                                </p>
                                <p>
                                    <span>{{ $t("layout.text45_3") }}</span
                                    >{{ $t("layout.text58") }}
                                </p>
                            </div>
                        </div>
                        <div class="no"></div>
                    </li>
                    <li>
                        <div class="info">
                            <div class="label">
                                {{ $t("layout.text59") }}
                            </div>
                            <div class="text">
                                <p>
                                    <span>{{ $t("layout.text45_1") }}</span
                                    >{{ $t("layout.text60") }}
                                </p>
                                <p>
                                    <span>{{ $t("layout.text45_3") }}</span
                                    >{{ $t("layout.text61") }}
                                </p>
                            </div>
                        </div>
                        <div class="no"></div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="Partners">
            <div class="main2">
                <div class="name">
                    {{ $t("layout.page61") }}
                </div>
                <ul>
                    <li>
                        <img src="@/assets/image/img17.png" alt="" srcset="" />
                    </li>
                    <li>
                        <img src="@/assets/image/img18.png" alt="" srcset="" />
                    </li>
                    <li>
                        <img src="@/assets/image/img19.png" alt="" srcset="" />
                    </li>
                    <li>
                        <img src="@/assets/image/img20.png" alt="" srcset="" />
                    </li>
                </ul>
                <div class="min">
                    <img src="@/assets/image/img21.png" alt="" srcset="" />
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.page {
    padding: 200px 0 0 0;
    .banner {
        position: relative;
        padding: 0 15px;
        .d {
            justify-content: space-between;
            .info {
                flex: 1;
            }
            .name {
                font-size: 24px;
            }
            .TronBank {
                margin-top: 19px;
                color: #eb0029;
                font-size: 96px;
                font-weight: 700;
            }
            .image {
                img {
                    width: 100%;
                    max-width: 634px;
                }
            }
        }
        .row {
            position: absolute;
            bottom: 0;
            .cell {
                margin-bottom: 30px;
                .label {
                    font-size: 16px;
                }
                .value {
                    color: #eb0029;
                    font-size: 36px;
                    font-weight: 700;
                    line-height: 160%; /* 57.6px */
                }
            }
        }
    }
    .Energyleasing {
        margin-top: 140px;
        display: flex;
        gap: 80px;
        padding: 0 15px;
        .leasingblock {
            flex: 1;
            position: relative;
            padding: 32px;
            border-radius: 20px;
            border: 1px solid #eb0029;
            &::after {
                position: absolute;
                right: 15px;
                top: 15px;
                width: 224px;
                height: 224px;
                flex-shrink: 0;
                content: "";
                background: url("@/assets/image/img6.png") no-repeat;
                background-position: center;
                background-size: contain;
                z-index: -1;
            }
            &:last-child {
                &::after {
                    background: url("@/assets/image/img7.png") no-repeat;
                    background-position: center;
                    background-size: contain;
                }
            }
            .name {
                color: #eb0029;
                font-size: 32px;
                font-weight: 700;
                line-height: 44px; /* 137.5% */
            }
            .row {
                margin-top: 20px;
                .cell {
                    display: flex;
                    align-items: center;
                    color: #eb0029;
                    font-size: 20px;
                    font-weight: 700;
                    line-height: 200%;
                    img {
                        margin-right: 15px;
                        width: 19px;
                        height: 19px;
                        flex-shrink: 0;
                    }
                }
            }
            .text {
                margin-top: 20px;
                color: #000;
                font-size: 16px;
                line-height: 160%; /* 25.6px */
            }
            .button-wrap {
                padding-bottom: 65px;
                .van-button {
                    position: absolute;
                    bottom: 32px;
                    right: 32px;
                    display: inline-block;
                    width: auto;
                    height: auto;
                    padding: 9.5px 20px;
                    color: #fff;
                    font-size: 20px;
                    font-weight: 400;
                    &::after {
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        border: 2px solid #eb0029;
                        background: transparent;
                        transition: all 0.3s ease;
                        border-radius: 10px;
                        opacity: 0;
                    }
                    &:hover {
                        &:after {
                            opacity: 1;
                            top: -4px;
                            left: -4px;
                            right: -4px;
                            bottom: -4px;
                        }
                    }
                }
            }
        }
    }
    .HowToParticipate {
        margin-top: 140px;
        padding: 140px 0;
        background: #eb0029;
        .name {
            text-align: center;
            color: #fff;
            font-size: 32px;
            font-weight: 700;
            line-height: 44px; /* 137.5% */
        }
        .row {
            position: relative;
            margin-top: 50px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            &::after {
                content: "";
                position: absolute;
                left: 20px;
                top: 60px;
                right: 20px;
                border-top: 1px dashed #fff;
            }
            .cell {
                padding: 0 20px;
                position: relative;
                background: #eb0029;
                z-index: 1;
                img {
                    display: block;
                    margin: 0 auto;
                    width: 120px;
                    height: 120px;
                    flex-shrink: 0;
                }
                .label {
                    display: flex;
                    align-items: center;
                    color: #fff;
                    font-size: 16px;
                    font-weight: 700;
                    line-height: 160%; /* 25.6px */
                    i {
                        margin-right: 8px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: #eb0029;
                        font-size: 20px;
                        font-weight: 600;
                        font-family: "Noto Sans SC";
                        width: 22px;
                        height: 22px;
                        flex-shrink: 0;
                        font-style: normal;
                        background: #fff;
                        border-radius: 50%;
                    }
                }
            }
        }
    }
    .tbk {
        margin-top: 140px;
        padding: 0 15px;
        text-align: center;
        .title {
            font-size: 32px;
            font-weight: 700;
            line-height: 44px; /* 137.5% */
        }
        .text {
            margin-top: 16px;
            font-size: 16px;
            font-weight: 400;
            line-height: 160%; /* 25.6px */
        }
        .image {
            margin: 80px auto 0 auto;
            img {
                margin: 0 auto;
                display: block;
                max-width: 100%;
                &.max {
                    display: block;
                }
                &.min {
                    display: none;
                }
            }
        }
    }
    .TBKTokenEconomicModel {
        padding: 0 15px;
        margin-top: 140px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .info {
            max-width: 420px;
            .name {
                color: #000;
                font-size: 32px;
                font-weight: 700;
                line-height: 44px; /* 137.5% */
            }
            .text {
                margin-top: 16px;
                color: #000;
                font-size: 16px;
                line-height: 200%; /* 32px */
            }
        }
        .blockModel {
            position: relative;

            ._block {
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                text-align: center;
                border-radius: 20px;
                background: #eb0029;

                &:hover {
                    box-shadow: 0px 4px 20px 0px #eb0029;
                }
                .value {
                    font-size: 48px;
                    font-weight: 900;
                    line-height: 120%; /* 57.6px */
                }
                .label {
                    font-size: 24px;
                    font-weight: 700;
                    // line-height: 200%; /* 48px */
                }
                span {
                    margin-top: 10px;
                    font-size: 12px;
                    font-weight: 400;
                    line-height: 200%;
                }
            }
            .row1 {
                display: flex;
                .cell {
                    &:first-child {
                        width: 306px;
                        height: 263px;
                        flex-shrink: 0;
                    }
                    &:last-child {
                        margin-left: 40px;
                        .cel {
                            width: 292px;
                            height: 144px;
                            flex-shrink: 0;
                            &:last-child {
                                margin-top: 30px;
                            }
                        }
                    }
                }
            }
            .row2 {
                margin-top: 30px;
                display: flex;
                padding-left: 112px;
                .cell {
                    width: 194px;
                    height: 139px;
                    flex-shrink: 0;
                    &:first-child {
                        position: relative;
                        margin-top: -50px;
                    }
                    &:last-child {
                        margin-left: 40px;
                    }
                }
            }
        }
    }
    .map {
        padding: 0 15px;
        margin-top: 140px;
        .title {
            text-align: center;
            font-size: 32px;
            font-weight: 700;
            line-height: 44px; /* 137.5% */
        }
        ul {
            margin-top: 100px;
            li {
                display: flex;
                text-align: right;
                &.current {
                    .info {
                        border-radius: 20px;
                        background: #eb0029;
                        color: #fff;
                        &::before {
                            content: "";
                            position: absolute;
                            left: -12px;
                            top: 45px;
                            margin-top: -6px;
                            width: 0;
                            height: 0;
                            border-left: 12px solid transparent;
                            border-right: 12px solid transparent;
                            border-bottom: 12px solid #eb0029;
                            transform: rotateZ(-90deg);
                        }
                    }
                    .no {
                        &::after {
                            background: url("@/assets/image/img16.png")
                                no-repeat;
                            background-size: contain;
                        }
                    }
                }
                .info {
                    position: relative;
                    margin-top: -20px;
                    padding: 20px 24px 24px 24px;
                    flex: 1;

                    .label {
                        font-size: 32px;
                        font-weight: 700;
                        line-height: 44px; /* 137.5% */
                    }
                    .text {
                        font-size: 16px;
                        font-weight: 400;
                        line-height: 160%;
                        p {
                            margin-top: 12px;
                        }
                    }
                    span {
                        font-weight: 700;
                    }
                    &::after {
                    }
                }

                .no {
                    position: relative;
                    flex: 1;
                    &::after {
                        position: absolute;
                        top: 10px;
                        display: block;
                        content: "";
                        width: 30px;
                        height: 198px;
                        background: url("@/assets/image/img15.png") no-repeat;
                        background-size: contain;
                    }
                }

                &:nth-child(odd) {
                    .info {
                        margin-right: 23px;
                    }
                    .no {
                        padding-right: 102px;
                        &::after {
                            left: 0;
                        }
                    }
                }
                &:nth-child(even) {
                    text-align: left;
                    flex-direction: row-reverse;
                    .info {
                        margin-left: 23px;
                    }
                    .no {
                        padding-left: 102px;
                        &::after {
                            right: 0;
                        }
                    }
                }
            }
        }
    }
    .Partners {
        margin-top: 140px;
        padding: 140px 15px;
        background: #eb0029;
        text-align: center;
        .name {
            color: #fff;
            font-size: 32px;
            font-weight: 700;
            line-height: 44px; /* 137.5% */
        }
        ul {
            max-width: 1221px;
            margin: 60px auto 0 auto;
            li {
                margin-bottom: 40px;
                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
        img {
            max-width: 100%;
        }
        .min {
            display: none;
        }
    }
    @media (max-width: 1200px) and (min-width: 1000px) {
        & {
            .banner {
                .d {
                    .TronBank {
                        font-size: 66px;
                    }
                }
            }
        }
    }
    @media (max-width: 1000px) {
        & {
            padding: 170px 0 0 0;
            &::after,
            &::before {
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                content: "";
                background-size: 25%;
                background-repeat: no-repeat;
                z-index: -1;
                @media (max-width: 750px) {
                    & {
                        background-size: 50%;
                    }
                }
            }
            &::after {
                background-image: url("@/assets/image/img1.png");
                background-position: right top;
                background-size: 25%;
            }
            &::before {
                background-image: url("@/assets/image/img2.png");
                background-position: left top;
            }
            .banner {
                text-align: center;
                .d {
                    display: block;
                    .name {
                        font-size: 16px;
                    }
                    .TronBank {
                        margin-top: 16px;
                        font-size: 48px;
                    }
                    .image {
                        margin: 0 auto;
                        img {
                            width: 100%;
                            max-width: 397.999;
                        }
                    }
                }
                .row {
                    position: static;
                    .cell {
                        margin-bottom: 24px;
                        .label {
                            font-size: 16px;
                        }
                        .value {
                            font-size: 32px;
                            line-height: 160%; /* 57.6px */
                        }
                    }
                }
            }
            .Energyleasing {
                margin-top: 100px;
                display: block;
                .leasingblock {
                    position: relative;
                    margin-bottom: 24px;
                    padding: 16px;
                    &::after {
                        right: 0;
                        top: 24px;
                        width: 140px;
                        height: 140px;
                    }
                    .name {
                        font-size: 20px;
                    }
                    .row {
                        margin-top: 8px;
                        .cell {
                            font-size: 16px;
                            font-weight: 400;
                        }
                    }
                    .text {
                        margin-top: 24px;
                        font-size: 14px;
                    }
                    .button-wrap {
                        padding-bottom: 0;
                        margin-top: 24px;
                        text-align: center;
                        .van-button {
                            position: sticky;
                            display: block;
                            width: 100%;
                            height: auto;
                            padding: 20px;
                            font-size: 16px;
                            &::after {
                                display: none;
                            }
                        }
                    }
                }
            }
            .HowToParticipate {
                margin-top: 100px;
                padding: 100px 0;
                background: #eb0029;
                .name {
                    font-size: 20px;
                }
                .row {
                    margin-top: 40px;
                    display: block;
                    text-align: center;
                    &::after {
                        display: none;
                    }
                    .cell {
                        padding: 0 0 80px 0;
                        &::after {
                            position: absolute;
                            content: "";
                            left: 0;
                            right: 0;
                            bottom: 0;
                            margin: 0 auto;
                            width: 2px;
                            height: 60px;
                            background: url("@/assets/image/img22.svg");
                            background-size: contain;
                            background-position: center;
                        }
                        img {
                            width: 80px;
                            height: 80px;
                        }
                        .label {
                            justify-content: center;
                        }
                        &:last-child {
                            &::after {
                                display: none;
                            }
                        }
                    }
                }
            }
            .tbk {
                margin-top: 100px;
                .title {
                    font-size: 20px;
                }
                .text {
                    font-size: 14px;
                    line-height: 200%; /* 25.6px */
                }
                .image {
                    margin: 40px auto 0 auto;
                    max-width: 328px;
                    img {
                        max-width: 100%;
                        &.max {
                            display: none;
                        }
                        &.min {
                            display: block;
                        }
                    }
                }
            }
            .TBKTokenEconomicModel {
                margin-top: 100px;
                display: block;
                .info {
                    text-align: center;
                    .name {
                        font-size: 20px;
                    }
                    .text {
                        font-size: 14px;
                        line-height: 200%; /* 32px */
                    }
                }
                .blockModel {
                    margin: 40px auto 0 auto;
                    ._block {
                        .value {
                            font-size: 40px;
                            font-weight: 700;
                        }
                        .label {
                            font-size: 16px;
                            line-height: 160%; /* 48px */
                        }
                        span {
                        }
                    }
                    .row1 {
                        display: flex;
                        .cell {
                            &:first-child {
                                width: 190px;
                                height: auto;
                            }
                            &:last-child {
                                flex: 1;
                                margin-left: 20px;
                                .cel {
                                    width: 100%;
                                    height: 160px;
                                    &:last-child {
                                        margin-top: 20px;
                                    }
                                }
                            }
                        }
                    }
                    .row2 {
                        margin-top: 20px;
                        padding-left: 0;
                        flex-wrap: wrap;
                        flex-direction: column-reverse;
                        .cell {
                            width: 100%;
                            height: 92px;
                            &:first-child {
                                position: relative;
                                margin-top: 20px;
                            }
                            &:last-child {
                                margin-top: 0;
                                margin-left: 0;
                            }
                            .cedc {
                                display: flex;
                                align-items: center;
                                span {
                                    margin-top: 0;
                                    margin-left: 8px;
                                }
                            }
                        }
                    }
                }
            }
            .map {
                margin-top: 100px;
                .title {
                    font-size: 20px;
                }
                ul {
                    margin-top: 40px;
                    li {
                        text-align: left;
                        &.current {
                            .info {
                                border-radius: 20px;
                                background: #eb0029;
                                color: #fff;
                                &::before {
                                    top: 35px;
                                }
                            }
                        }
                        .info {
                            margin-top: -0;
                            padding: 12px;

                            .label {
                                font-size: 20px;
                            }
                            .text {
                                font-size: 14px;
                            }
                        }
                        .no {
                            position: relative;
                            flex: none;
                            &::after {
                                position: static;
                                margin-top: 20px;
                            }
                        }

                        &:nth-child(odd) {
                            flex-direction: row-reverse;
                            .info {
                                margin-left: 12px;
                            }
                            .no {
                                padding-right: 0;
                                &::after {
                                    left: 0;
                                }
                            }
                        }
                        &:nth-child(even) {
                            .info {
                                margin-left: 12px;
                            }
                            .no {
                                padding-left: 0;
                                &::after {
                                    right: 0;
                                }
                            }
                        }
                    }
                }
            }
            .Partners {
                margin-top: 100px;
                padding: 100px 15px;
                .name {
                    font-size: 20px;
                }
                ul {
                    display: none;
                }
                img {
                    max-width: 100%;
                }
                .min {
                    margin-top: 40px;
                    display: block;
                }
            }
        }
    }
}
</style>
